<template>
	<view class="video_detail">
		<video :src="videoUrl" autoplay=""></video>
		<scroll-view scroll-y="true" >
			<view class="video_content">
				<view class="song_singer">{{artistName}}-{{name}}</view>
				<view class="desc">歌曲简介：{{setDesc}}</view>
				<view class="publishTime">发布时间：{{publishTime}}</view>
			</view>
			<view class="related">
				<view class="related_title">相关视频</view>
				<view class="related_item" v-for="item in related" :key="item.vid">
					<view class="item_image">
						<image :src="item.coverUrl" mode="scaleToFill"></image>
					</view>
					<view class="item_desc">
						<view class="item_desc_title">{{item.title}}</view>
						<view class="item_desc_username">{{item.creator[0].userName}}</view>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import { getVideoById, getVideoContent, getRelated } from '../../service/video_api.js'
	export default {
		data() {
			return {
				videoUrl: '',
				artistName:'',
				name:'',
				desc:'',
				publishTime:'',
				related: []
			}
		},
		onLoad: function(option) {
			const id = option.id
			this.getMV(id)
		},
		computed:{
			setDesc() {
				return this.desc === ''?'暂无简介':this.desc
			}
		},
		methods: {
			// 获取MV
			getMV(id) {
				// 获取MV的URl资源
				getVideoById(id).then(res => {
					this.videoUrl = res.data.data.url
				})
				// 获取MV的信息
				getVideoContent(id).then(res => {
					this.artistName = res.data.data.artistName
					this.desc = res.data.data.desc
					this.name = res.data.data.name
					this.publishTime = res.data.data.publishTime
				})
				// 获取相关视频
				getRelated(id).then(res => {
					this.related = res.data.data
				})
			}
		}
	}
</script>

<style scoped>
	.video_detail video {
		width: 100%;
		position: fixed;
		z-index: 999;
	}
	.video_content {
		margin-top: 450rpx;
		padding: 10px 5px;
	}
	.song_singer {
		font-size: 30rpx;
		font-weight: bold;
	}
	.desc {
		margin-top: 10px;
		color: #666;
		font-size: 20rpx;
		line-height: 35rpx;
	}
	.publishTime {
		margin-top: 10px;
		color: #666;
		font-size: 20rpx;
		line-height: 35rpx;
	}
	.related {
		width: 100%;
		margin-top: 20px;
	}
	.related_title {
		width: 95%;
		margin: 0 auto;
		border-bottom: 1px solid #ccc;
		font-size: 30rpx;
		font-weight: bold;
	}
	.related .related_item {
		display: flex;
		justify-content: space-around;
		width: 100%;
		margin-top: 10px;
	}
	.related_item .item_image {
		width: 30%;
	}
	.item_image image {
		width: 100%;
		height: 130rpx;
		border-radius: 3px;
	}
	.related_item .item_desc {
		width: 65%;
		font-size: 20rpx;
	}
	.item_desc_title {
		color: #333;
	}
	.item_desc_username {
		margin-top: 5px;
		color: #666;
	}
</style>
